import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Button } from 'antd';
import { Link } from 'dva/router';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getQueryString } from '../../utils/utils';
import styles from './${className}.less';

@connect(state => ({
  detail: state.${classname}.${classname}Detail
}))
export default class ${classname}Detail extends Component {
  state = {

  }
  componentDidMount() {
    const { dispatch } = this.props;
    const id = getQueryString('id');
    dispatch({
      type: '${classname}/detail',
      payload: id,
    });
  }

  renderDetail = (detail) => {
    return (
      <Col className={styles.infoMap}>
        #foreach ($column in $columns)
         <Row>
          <Col span={4}>$column.comments：</Col>
          <Col>{detail.$column.attrname}</Col>
         </Row>
        #end
      </Col>
    );
  }
  render() {
    const { detail } = this.props;
    const id = getQueryString("id");
    return (
      <PageHeaderLayout>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }} className={styles.infoBg} style={{ minHeight: 'calc(100vh - 260px)' }}>
          <Row>
            <Col span={4} style={{ textAlign: 'right', paddingRight: '20px' }}>
              <Link
                to={{
                  pathname: '/home/${classname}/edit',
                  search: `id=${id}`,
                }}
              ><Button type="primary">编辑</Button>
              </Link>
            </Col>
          </Row>
          {detail != null && this.renderDetail(detail)}
        </Row>
      </PageHeaderLayout>
    );
  }
}
